<template>
  <div>
    <template v-if="item.type == 'text'">
      <Input  type="text" v-model="item.value" >
        <Button slot="append" icon="checkmark-round" @click="uploadConfig"></Button>
      </Input>
    </template>
    <template v-if=" item.type =='textarea'">
      <Input  type="textarea" v-model="item.value" :rows="5" >
      </Input>
      <Button slot="append" icon="checkmark-round" @click="uploadConfig" class="config-list-button right">修改</Button>
    </template>
    <template v-else-if="item.type == 'picture'">
      <Input  type="text" v-model="item.value">
        <Button slot="append" icon="image" @click="imgmodal=!imgmodal" ></Button>
      </Input>
    </template>
    <Modal
        v-if="item.type == 'picture'" 
        v-model="imgmodal"
        title="选择图片上传"
        @on-ok="uploadConfig">
        <div ><img :src="item.value" class="config-list-img"></div>
        <div style="text-align: center;">
          <div class=" ivu-upload-select " >
            <input   class="file-btn" type="file" @change="imgChange($event)"> 
            <button type="button" class="ivu-btn ivu-btn-ghost">
              <i class="ivu-icon ivu-icon-ios-cloud-upload-outline"></i> 
              <span>Upload files</span>
            </button>
            <Progress :percent="percent" v-show="percent !='0'"></Progress>
          </div>
        </div>
    </Modal>
  </div>
</template>
<script>
  import * as qiniu from 'qiniu-js'
  export default {
    name: 'ConfigInput',
    props: {
      item: Object
    },
    data () {
      return {
        imgmodal:false,
        percent:0//进度条最大100
      }
    },
    computed:{

    },
    methods:{
      imgChange:function(event){
        console.log(event.target.files);
        let putExtra = {
            fname: "",
            params: { },
            mimeType:  ["image/png", "image/jpeg", "image/gif"]
        },
        config = { },
        key,
        token,
        imgurl,
        file =event.target.files[0],
        that=this;
        if(file){
          this.$http.get("/admin/qnytoken",{
            params: {
              "filename": file.name,
              "filesize":file.size,
              "classify":1,
            }
          })
          .then(function (response) {
            key = response.data.filename;
            token=response.data.token;
            imgurl=response.data.imgurl;
            let observable = that.$qiniu.upload(file, key, token, putExtra, config);
            let subscription = observable.subscribe({
              next(res){
                that.percent=res.total.percent;
              },
              error(err){
                console.log(err);
              },
              complete(res){
                that.item.value=imgurl;
                that.percent=0;
              }
            });
          });
            
        }
      },
      uploadConfig:function(){
        this.$http({
          method: 'post',
          url:"/admin/setconfig",
          data:this.item
        })
        .then((response)=>{
          this.$Message.success({
            content:"修改成功",
            top: 50,
            duration: 3
          });
        });
      }
    }
  }
</script>
<style>
  
  .config-list-button{
    margin: 0.2rem auto;
  }

</style>